import PersonalIcon from "../../../Icon/personalIcon";
import Avator from "../../../common/Avator";
import HeaderWrapper from "../../../common/HeaderWrapper";
import HeaderDetail from "../../../common/HeaderWrapper/headerDetail";
import {
  getPersonalItem,
  getPersonalLabel,
  getRgb,
} from "../../../common/utils";
import { useAccentColor } from "../../../common/hooks/useAccentColor";
import Head from "../components/Title";
import ItemWraper from "../components/ItemWraper";

// import Item from '../components/Item'
import Item from "../../CommonTpl/components/Item";
import { useLayoutMargin } from "../../../common/hooks/useLayoutMargin";
import { context } from "../../../common/context";
import { ResumeHead } from "./style";

function HeaderItem({ name }) {
  const {
    resume: { customization, personalDetails },
  } = context;

  const { header, applyAccentColor, layout } = customization;
  const [color] = useAccentColor("resumeHeader");
  const iconStyle: any = {
    width: "15px",
    heigth: "15px",
    position: "absolute",
    left: 0,
    top: "50%",
    transform: "translateY(-50%)",
  };
  if (applyAccentColor?.includes("icons")) {
    iconStyle.color = color;
  }
  const style: any = {
    // paddingBottom: '0.8em',
    marginTop: "8px",
    display: "flex",
    alignItems: "center",
    gap: "4px",
    whiteSpace: "nowrap",
    paddingLeft: "20px",
    position: "relative",
  };
  if (
    header.position === "top" &&
    (header.detailsArrangement === "grid-2" ||
      header.detailsArrangement === "grid-3")
  ) {
    style.flexDirection = "column";
  }

  if (layout.detailsPosition === "top") {
    style.marginTop = "2px";
  }

  const content = getPersonalItem(personalDetails, name);

  const Label = () => {
    if (header.detailsArrangement !== "wrap") {
      return (
        <div style={{ display: "flex" }}>
          <div>{getPersonalLabel(personalDetails, name)}</div>
          {content}
        </div>
      );
    }
    return (
      <>
        {getPersonalLabel(personalDetails, name).replace(/　/g, "")}
        {content}
      </>
    );
  };

  if (content) {
    return (
      <div style={style}>
        <PersonalIcon name={name} style={iconStyle}></PersonalIcon>
        {header.showLabel ? <Label /> : <div>{content}</div>}
      </div>
    );
  } else {
    return null;
  }
}
function ResumeHeader(props) {
  const { initMarginH } = props;
  const {
    resume: { customization, personalDetails },
    fontScale,
  } = context;

  const { layout, spacing, applyAccentColor, header, title, colors } =
    customization;
  const { position, photoObj } = header;
  const { marginVertical, marginHorizontal } = spacing;
  const { titleBkg } = title || {};

  const detailsOrder = (personalDetails?.detailsOrder || []).filter(
    (item) => item !== "name" && item !== "expJob"
  );
  const nameStyle: any = {
    fontSize: `${(spacing.fontSize + 15) * fontScale}pt`,
    fontWeight: "bold",
    lineHeight: `${spacing.lineHeight + 20}pt`,
  };
  if (layout.detailsPosition !== "top" || position === "top") {
    nameStyle.marginTop = "20px";
    nameStyle.textAlign = "center";
  }

  if (applyAccentColor?.includes("name")) {
    nameStyle.color = getRgb(colors?.strong?.accentColor);
  }
  const jobStyle: any = {
    fontSize: `${(spacing.fontSize + 12) * fontScale}pt`,
    fontWeight: "500",
    lineHeight: `${spacing.lineHeight + 15}pt`,
    display: "flex",
    alignItems: "flex-end",
  };
  if (applyAccentColor?.includes("expJob")) {
    jobStyle.color = getRgb(colors?.strong?.accentColor);
  }
  let titleColor = "#fff";

  if (applyAccentColor?.includes("headings")) {
    titleColor = getRgb(colors?.strong?.accentColor);
  }
  const margin = useLayoutMargin({ initMarginV: 25 });

  const customStyle: any = { position: "relative" };
  customStyle.margin = margin;
  customStyle.marginBottom = 0;
  // `${(marginVertical || 0) * 2 + initvalue.marginVertical + 25}mm ${(marginHorizontal || 0) * 2 + initvalue.marginHorizontal}mm  0`
  return (
    <div
      style={{
        overflow: "hidden",
        background: getRgb(colors.strong?.backgroundColor),
        color: getRgb(colors.strong?.textColor),
      }}
    >
      <ItemWraper style={{ ...customStyle }}>
        <ResumeHead
          style={{
            left: `-${(marginHorizontal || 0) * 2}mm`,
            background: getRgb(titleBkg) || "rgba(0,0,0,.04)",
            color: titleColor,
          }}
        >
          <div className={"resumeHeadLeft"}>个人简历</div>
          <div className={"resumeHeadRight"}>
            <div className={"resumeHeadTxt"}>Personal resume</div>
            <div className={"resumeHeadTxt"}>我一直在努力成为更好的自己</div>
          </div>
        </ResumeHead>
        <Head name="basicInfo"></Head>
        <Item initMarginH={initMarginH}>
          <HeaderWrapper style={{ padding: 0, marginBottom: 0 }}>
            <Avator {...personalDetails.photoObj} {...photoObj}></Avator>
            <div style={{ flex: 1 }}>
              <div
                style={{
                  display: "flex",
                  margin: "8px 0",
                  gap: 10,
                }}
              >
                <div style={nameStyle} id="name">
                  {getPersonalItem(personalDetails, "name")}
                </div>
                <div style={jobStyle}>
                  {getPersonalLabel(personalDetails, "expJob")}
                  {getPersonalItem(personalDetails, "expJob")}
                </div>
              </div>

              <HeaderDetail>
                {detailsOrder.map((item) => {
                  return <HeaderItem name={item} key={item}></HeaderItem>;
                })}
              </HeaderDetail>
            </div>
          </HeaderWrapper>
        </Item>
      </ItemWraper>
    </div>
  );
}
export default ResumeHeader;
